<template>
  <div class="content">
    <header>
      <el-form :model="searchData" class="searchForm">
        <el-form-item>
          <el-input v-model.trim="searchData.parkName" clearable class="seech1" placeholder="停车场名称" @change="getTableData"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="searchData.bolianParkId" class="seech1" clearable placeholder="泊链parkId" @change="getTableData" />
        </el-form-item>
        <el-form-item class="seech0">
          <el-select v-model="searchData.isShow" class="seech2" clearable placeholder="线上展示状态" @change="getTableData">
            <el-option label="正常展示" value="1" />
            <el-option label="关闭展示" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item style="width: 80px;">
          <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button>
        </el-form-item>
      </el-form>

	  <div class="query">
		  <el-badge :value="addTotal" class="item">
		    <el-button size="small" @click="bolianAddShow = true;">泊链新增车场</el-button>
		  </el-badge>
	  </div>
    </header>

    <!-- 数据列表展示 -->
    <section>
      <el-table :data="tableData" height="100%" border v-loading="tableLoading" stripe>
        <el-table-column prop="parkName" label="停车场名称" align="center" width="160"/>
        <el-table-column prop="parkAddress" label="停车场地址" align="center" />
        <el-table-column prop="bolianComId" label="泊链ComId" align="center" width="140"/>
        <el-table-column prop="bolianParkUnionId" label="泊链ParkUnionId" align="center" width="100" />
        <el-table-column prop="bolianParkId" label="泊链ParkId" align="center" width="140"/>
        <el-table-column label="更新时间" align="center" width="140">
          <template slot-scope="scope"> {{ scope.row.updateTime | dateTimeFilter }}</template>
        </el-table-column>
        <el-table-column prop="telephone" label="联系电话" align="center" width="110"/>
        <el-table-column prop="totalParkSpace" label="总车位" align="center" width="70"/>
        <el-table-column prop="reserveParkSpace" label="预约车位" align="center" width="80"/>
        <el-table-column prop="priceDesc" label="收费规则" align="center" width="100">
          <template slot-scope="scope">
            <el-popover trigger="hover" width="200">
              <span slot="reference" class="seeRule">查看规则</span>
              <span v-html="scope.row.priceDesc" />
            </el-popover>
            <i class="el-icon-edit" @click="editRule(scope.row)"></i>
          </template>
        </el-table-column>
        <el-table-column label="展示状态" prop="isShow" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isShow"
              active-color="#46a6ff"
              inactive-color="#ccc"
              @change="switchStatus(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit-outline" size="mini" @click="editShow = true,row = scope.row">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!-- 分页 -->
    <footer>
      <el-pagination
        :hide-on-single-page="false"
        :current-page="searchData.current"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="10"
        background
        style="margin-top:10px;"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog width="700px" :visible.sync="editShow" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <edit v-model="aa" v-if="editShow" :row = "row" @closeDialog="editShow = false"/>
    </el-dialog>

    <el-dialog title="修改车场收费规则" :visible.sync="editRuleShow" append-to-body width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="editRuleData" label-width="120px" :rules="editRules" ref="ruleForm">
        <el-form-item label="车场收费规则：" prop="priceDesc">
          <el-input v-model="editRuleData.priceDesc" size="mini" type="textarea" :rows="3" style="width: 300px;"></el-input>
        </el-form-item>
        <div style="text-align: center;">
          <el-button size="mini" @click="editRuleShow = false">取消</el-button>
          <el-button size="mini" type="warning" @click="confirmEdit('ruleForm')">确认</el-button>
        </div>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="bolianAddShow" @close="getTableData" append-to-body width="1000px" :close-on-click-modal="false" :close-on-press-escape="false">
      <addInfo v-if="bolianAddShow"/>
    </el-dialog>
  </div>
</template>

<script>
  import edit from './components/edit.vue'
  // import edit from './components/cropper.vue'
  import addInfo from './components/bolianAddInfo.vue'
  import { formatDate } from '@/utils/formatDate.js'

export default {
  name: 'Tripartite',
  components: { edit , addInfo },
  data() {
    return {
      aa: '',
      editShow: false,
      editRuleShow: false,
      bolianAddShow: false,
      addTotal: 0,
      tableData: [],
      searchData: {
        currentPage: 1,
        pageSize: 10,
        isShow: '',
        parkSource: 1
      },
      total: null,
      editRuleData: {
        priceDesc: ''
      },
      tableLoading: true,
      editRules: {
        priceDesc: [
          { required: true, message: '请输入收费规则', trigger: 'blur' },
          { min: 1, max: 25, message: '长度在1 到 25 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  filters: {
    dateTimeFilter(date){
      if(date != null){
        return formatDate(new Date(date), 'yyyy-MM-dd hh:mm')
      }
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    getTableData() {
      if(this.searchData.isShow == 'null') {
        this.searchData.isShow = ''
      }
      this.$axios({
        method: 'post',
        url: '/park/park-info/getParkPage',
        data: this.searchData
      }).then((res) => {
        this.addTotal = res.data.count;
        let records = res.data.ipage.records;
        records.forEach(item => {
          item.isShow = item.isShow == '1'
        })
        this.tableData = records;
        this.total = res.data.ipage.total;
        this.tableLoading = false;
      })
    },
    switchStatus(e) {
      const status = e.isShow == true ? '1' : '0';
      this.$axios({
        method: 'post',
        url: '/park/park-info/switchParkShow',
        data: this.$qs.stringify({ parkId: e.id, isShow: status })
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success('规则状态修改成功！')
        } else {
          this.$message.warning('规则状态修改失败！')
        }
      })
    },
    editRule(row) {
      this.editRuleShow = true;
      this.editRuleData.priceDesc = row.priceDesc;
      this.editRuleData.id = row.id;
    },
    confirmEdit(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.$axios({
            method: 'post',
            url: '/park/park-info/updatePriceDesc',
            data: this.$qs.stringify(this.editRuleData)
          }).then(res => {
            if(res.code == 200) {
              this.$message.success('修改规则成功！')
              this.getTableData();
              this.editRuleShow = false;
            }
          })
        } else {
          return false
        }
      })
    },
    // 分页修改每页显示条数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getTableData();
    },
    // 分页跳转页面
    handleCurrentChange(val) {
      this.searchData.currentPage = val;
      this.getTableData();
    }
  }
}
</script>

<style scoped>
  .content {
    height: 100%;
    width: 100%;
    position: relative;
  }
  header {
    height: 40px;
  }
  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: -20px;
  }
  section {
    height: calc(100% - 70px);
  }
  .searchForm .el-form-item {
  	width: 220px;
  	display: inline-block;
  }
  .searchForm .seech0 {
    width: 160px;
  }
  .seech1 {
  	width:200px;
  }
  .seech2 {
    width: 140px;
  }
  .el-icon-edit {
    color: #1890FF;
  }
  .el-icon-edit:hover,
  .seeRule:hover{
    cursor: pointer;
  }
  .seeRule {
    color: #09CCDE;
  }
  .query {
    position: absolute;
    right: 50px;
    top: 0;
  }


</style>
